<template>
  <div>
    <div class="content">
      <ul >
        <li @click="cur=0" :class="{active:cur==0}">
          <a href="#">账号登录</a>
        </li>
        <li  @click="cur=1" :class="{active:cur==1}">
          <a href="#">注册账号</a>
        </li>
      </ul>
      <div class="card" >
        <div v-show="cur==0"> 
          <ol>
            <li style="border-bottom:none">
              <img src="../img/people.png" alt />
              <input type="text" placeholder="用户名/手机号" />
            </li>
            <li>
              <i>
                <img src="../img/password.png" alt />
              </i>
              <input type="text" placeholder="请输入密码" />
            </li>
          </ol>
          <div class="cen">
            <el-checkbox v-model="checked"></el-checkbox>下次自动登录
            <a href="#">注册新账号</a>
            <a href="#">忘记密码</a>
          </div>
          <el-button type="warning">登录</el-button>
        </div>
        <div v-show="cur==1">
          <ol class="zhu">
            <li>
              <span>账 号</span>
              <input type="text" placeholder="用户名/手机号" />
            </li>
            <li>
              <span>手 机</span>
              <input type="text" placeholder="请输入手机号" />
            </li>
            <li>
              <span>密 码</span>
              <input type="text" placeholder="请输入密码" />
            </li>
            <li>
              <span>验 证 码</span>
              <input type="text" placeholder="图形验证码" />
            </li>
            <li>
              <span>短 信</span>
              <input type="text" placeholder="请输入短信" />
              <button>获取验证码</button>
            </li>
          </ol>
          <el-button type="warning">登录</el-button>
        </div>
      </div>
      <div class="san">
        <h3>使用合作账号登录</h3>
        <ul class="ul">
          <li>
            <p>
              <img src="../img/qq.png" alt />
              <span>QQ登录</span>
            </p>
          </li>
          <li>
            <p>
              <img src="../img/wei.png" alt />
              <span>微信登录</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <a href="#" class="one">
        <i>
          <img src="../img/shan.png" alt />
        </i>
        <span style="margin-left:3px">删除电话被冒用的信息</span>
      </a>
      <a href="#" class="two">
        <i>
          <img src="../img/letter.png" alt />
        </i>
        <span class="lian">联系我们</span>
      </a>
    </div>
    <div class="foot">
      <ul>
        <li style="color: #5F6880;">手机版</li>
        <li>电脑版</li>
        <li>莱州论坛</li>
      </ul>
      <p class="wang">联系电话：0535-2892666</p>
      <ul style="padding-bottom:30px">
        <li>莱州信息网</li>
        <li>站长统计</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      cur: 0
    };
  },
  methods: {}
};
</script>

<style >
.card .zhu li button {
  border: 1px solid #1980ff;
  background: #eef8ff;
  text-align: center;
  color: #1980ff;
  width: 100px;
  border-radius: 3px;
  font-size: 14px;
  position: absolute;
  right: 0;
  height: 40px;
  outline: none;
}
.card .zhu li span {
  font-size: 14px;
  line-height: 40px;
  width: 60px;
  text-align: center;
}
.card .zhu li {
  position: relative;
  padding: 0;
  border: none;
  height: 51px;
  border-bottom: 1px solid #e7e7e7;
}
.card .zhu input {
  font-size: 16px;
}
.footer a i {
  height: 100%;
  position: relative;
}
.footer i img {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 1px;
  left: -15px;
}
.footer a .lian {
  margin-left: 5px;
}
.footer a {
  text-align: center;
  background: #fff;
  border: 1px solid #dcdee0;
  color: #5f6880;
  display: inline-block;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
}
.footer a {
  background: #fff;
}
.footer .one {
  width: 190px;
}
.footer .two {
  width: 96px;
  padding: 0 5px;
}
.footer {
  display: flex;
  padding: 15px 10px;
  justify-content: center;
}
.foot ul {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.foot {
  padding-top: 10px;
  margin-bottom: 36px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.foot .wang {
  font-size: 12px;
  padding-bottom: 20px;
  color: #999;
}
.foot ul li {
  padding: 0 6px;
}
.san .ul li p {
  display: flex;
  align-items: center;
}
.san .ul {
  height: 40px;
}
.san .ul li img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.san .ul li {
  text-align: center;
  height: 40px;
  background-color: #fff;
  border: 1px solid #c8c6c4;
  margin: 0 15px 0;
  border-radius: 3px;
}
.san {
  border-top: 1px solid #e0e0e0;
  text-align: center;
  background: #fff;
  padding-bottom: 25px;
}
.san h3 {
  position: relative;
  top: -14px;
  color: #999;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 24px;
  display: inline-block;
  padding: 0 5px;
  background-color: #fff;
  overflow: hidden;
}
.card .el-button {
  width: 100%;
  margin: 20px 0 15px;
  background: #ff5b1b;
}
.cen {
  font-size: 12px;
  margin-top: 10px;
}
.cen a {
  color: #2a9bfb;
  margin-right: 5px;
}
.el-checkbox {
  margin: 0;
}
.card img {
  width: 20px;
  height: 20px;
}
.card {
  background: #fff;
  padding: 20px 10px;
}
.card ol li {
  border: 1px solid #e7e7e7;
  height: 43px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.card ol li input {
  text-indent: 8px;
  height: 38px;
  padding-top: 3px;
  font-size: 12px;
  color: #000;
  border: none;
  outline: none;
}

.card input::-webkit-input-placeholder {
  color: #999;
}
.content ul {
  display: flex;
  height: 45px;
  color: #333;
  font-size: 14px;
}
.content ul li {
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}
.content ul li.active {
  border-bottom: 2px solid #ff6400;
}
</style>
